<template>
  <view class="container">
    <textarea 
      class="textarea" 
      v-model="content" 
      placeholder="请输入您的自我介绍（最多150字符）" 
      maxlength="150"
    ></textarea>
    <view class="button-group">
      <button @click="cancel">取消</button>
      <button @click="saveIntroduction">完成</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content:'',
      userInfo: {
        psy_id:1,
      },
    };
  },
  methods: {
    cancel() {
      uni.navigateTo({ url: '/pages/psy/my/profile' });
    },
    async saveIntroduction() {
      if (!this.content) {
        uni.showToast({ title: '请输入内容', icon: 'none' });
        return;
      }

      try {
        const response = await uni.request({
          url: `http://127.0.0.1:5001/api_1_0/introduction`, 
          method: 'POST',
          data: {
            psy_id:this.userInfo.psy_id,
            content: this.content
          },
          header: {
           'Content-Type': 'application/json'
          }
        });

        if (response.statusCode === 200) {
          uni.showToast({ title: '保存成功', icon: 'success' });
          uni.navigateTo({
            url: '/pages/psy/my/profile' 
          });
        } else {
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '请求出错，请稍后重试', icon: 'none' });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.textarea {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

button {
  width: 45%;
  padding: 10px;
  background-color: #81b337;
  color: white;
  border: none;
  border-radius: 5px;
}

button:first-child {
  background-color: #f1f1f1;
  color: black;
}
</style>
